﻿<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Group ID Finder</title>
    <link rel="stylesheet" href="//js.arcgis.com/3.14/dojo/resources/dojo.css">
    <link rel="stylesheet" href="//js.arcgis.com/3.14/dgrid/css/dgrid.css">
    <link rel="stylesheet" href="//js.arcgis.com/3.14/dgrid/css/skins/claro.css">
    <link rel="stylesheet" href="//js.arcgis.com/3.14/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="//js.arcgis.com/3.14/esri/css/esri.css">
    <link rel="stylesheet" href="css/layout.css">

    <script>
        //async is a new dojoConfig option. The default value of false will load all the Dojo base modules
        //here we set it to true to take advantage of the asynchronous nature of dojo and the the base modules
        //are not automatically loaded.
        var dojoConfig = { async: true };//利用dojo的异步性质和基本模块
    </script>
    <script src="//js.arcgis.com/3.14/"></script>
    <script>
        //require function accepts an array of module ids and a function. The modules are provided as return variables passed as arguments to the function. This replaces the dojo.requires statements.
        require([
          "dojo/parser",
          "dojo/ready",
          "dojo/dom",
          "dojo/dom-construct",
          "dojo/_base/array",
          "dijit/registry",
          "dojo/on",
          "esri/arcgis/Portal",
          "esri/config",
          "esri/lang",
          "dgrid/Grid",
          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane"
        ], function (
          parser,
          ready,
          dom,
          domConstruct,
          array,
          registry,
          on,
          arcgisPortal,
          config,
          esriLang,
          Grid
        ) {
            var portal, portalUrl, groupGrid;

            
            ready(function () {
                parser.parse(); //在dojoConfig取代parseOnLoad = true

                config.defaults.io.proxyUrl = '../proxy/proxy.ashx';
                portalUrl = document.location.protocol + '//www.arcgis.com';

                //创建门户
                portal = new arcgisPortal.Portal(portalUrl);

                on(portal, 'load', function (p) {
                    dom.byId('groupFinderSubmit').disabled = false;
                    dom.byId('signIn').disabled = false;

                    //连接登录点击事件
                    on(dom.byId('signIn'), 'click', signIn);

                    //搜索时输入键被按下或单击按钮
                    on(dom.byId('groupFinderSubmit'), 'click', findArcGISGroup);
                    //操作内容框，按键事件
                    on(dom.byId('groupFinder'), 'keyup', function (e) {
                        if (e.keyCode === 13) {
                            findArcGISGroup();
                        }
                    });
                });
            });

            //基于输入关键字搜索
            function findArcGISGroup() {
                var keyword = dom.byId('groupFinder').value;
                var params = {
                    q: keyword,
                    sortField: 'modified',//排序字段
                    sortOrder: 'desc',//倒序查找
                    num: 20  //查找项目属性
                };
                portal.queryGroups(params).then(function (data) {
                    showGroupResults(data);//查询显示
                });
            }


            //显示一个组列表相匹配的输入用户名
            function showGroupResults(response) {
                //明确的任何现有的结果
                var data = [];
                if (groupGrid) {
                    groupGrid.refresh();
                }
                if (response.total > 0) {
                    //创建一个数组属性为每个组——我们将在一个dojo dgrid显示这些
                    data = array.map(response.results, function (group) {
                        return {
                            'snippet': group.snippet,//一个简短的总结描述
                            'title': group.title,
                            'url': group.url,
                            'thumbnail': group.thumbnailUrl || '',//缩略图
                            'id': group.id,
                            'owner': group.owner//集团的所有者的用户名

                        };
                    });
                    //创建grid
                    groupGrid = new Grid({
                        columns: {
                            thumbnail: 'Group Icon',//缩略图
                            title: 'Group',
                            snippet: 'Description',//一个简短的总结描述
                            id: 'Group ID'
                        },
                        renderRow: renderTable,//渲染,相当于定义模板
                        //这个函数呈现物看特性的表视图
                        showHeader: false
                    }, "grid");
                    groupGrid.renderArray(data);//绑定数据

                } else {
                    dom.byId('groupResults').innerHTML = '<h2>Group Results</h2><p>No groups were found. If the group is not public use the sign-in link to sign in and find private groups.</p>';
                }
            }

            function renderTable(obj, options) {//渲染渲染表格

                var template = '<div class="thumbnail"><img src=${thumbnail} width="50" height="50"/></div><a target="_blank" class="title" href=${url}>${title}</a><span class="owner"> (${owner} ) </span><div class="summary">${snippet} </div><textarea class="group=id" readonly="readonly" rows="1" cols="30">${id}</textarea>';

                obj.url = portalUrl + '/home/group.html?groupid=id:' + obj.id;
                obj.thumbnail = obj.thumbnail || '';

                //创建div
                return div = domConstruct.create("div", {
                    innerHTML: esriLang.substitute(obj, template)
                });

            }

            // 登录
            function signIn() {
                var signInLink = dom.byId('signIn');

                if (signInLink.innerHTML.indexOf('In') !== -1) {
                    portal.signIn().then(function (loggedInUser) {
                        signInLink.innerHTML = "Sign Out";
                        findArcGISGroup();   // 更新结果
                    }, function (error) {
                        signInLink.innerHTML = 'Sign In';   //错误返回
                    });
                } else {
                    portal.signOut().then(function (portalInfo) {
                        signInLink.innerHTML = "Sign In";
                        findArcGISGroup();
                    });
                }
            }
        });
    </script>
  </head>

  <body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"
    style="width:100%;height:100%;margin:0;">
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <h1>ArcGIS Online Group ID Finder</h1>
        <a id="signIn" disabled='disabled'>Sign In</a>
        <p>Find group ids based on search term. Sign-in to search for private groups.</p>
        <input name="groupFinder"  id="groupFinder" placeholder="username" value="esri" size="30" />
        <input name="groupFinderSubmit" disabled='disabled' type="submit" value="Submit" id="groupFinderSubmit" />
      </div>
      <div id='gridpane' data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
        <div id='grid'></div>
        <div id="groupResults"></div>
      </div>
    </div>
  </body>
</html>
